<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日常jQuery练习</title>
    <script src="../bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <style>
        .colorUp{
            background-color:lightblue;
        }
        .colorDown{
            background: #ccc;
        }
        table{
            border-collapse: collapse;
        }
        .myLove{
            background-color:pink;
            color:#fff;
        }
        .external{
            color:lightseagreen;
            text-underline:lightseagreen ;
        }
        div.CP{
            border:1px solid lightblue;
        }
        .loveColor{
            background-color:lightsalmon;
        }
    </style>
</head>
<body>

<!--使用tr:odd/even给表格跳行添加背景颜色-->
<h2>first table</h2>
<table class="first-table">
    <tbody>
    <tr>
        <td>声优</td>
        <td>角色</td>
        <td>出处</td>
    </tr>
    <tr>
        <td>神谷浩史</td>
        <td>夜斗</td>
        <td>野良神</td>
    </tr>
    <tr>
        <td>立花慎之介</td>
        <td>巴卫</td>
        <td>元气少女缘结神</td>
    </tr>
    <tr>
        <td>梶裕贵</td>
        <td>艾伦</td>
        <td>进击的巨人</td>
    </tr>
    <tr>
        <td>中村悠一</td>
        <td>羽鸟芳雪</td>
        <td>世界第一初恋</td>
    </tr>
    <tr>
        <td>前野智昭</td>
        <td>雪名皇</td>
        <td>世界第一初恋</td>
    </tr>
    <tr>
        <td>冈本信彦</td>
        <td>木佐翔太</td>
        <td>世界第一初恋</td>
    </tr>
    <tr>
        <td>近藤隆</td>
        <td>小野寺律</td>
        <td>世界第一初恋</td>
    </tr>
    <tr>
        <td>小西克幸</td>
        <td>高野政宗</td>
        <td>世界第一初恋</td>
    </tr>

    </tbody>
</table>
<!--使用tr:nth-child(odd/even)给表格跳行添加背景颜色-->
<h2>second table</h2>
<table class="sec-table">
    <tbody>
    <tr>
        <td>声优</td>
        <td>角色</td>
        <td>出处</td>
    </tr>
    <tr>
        <td>神谷浩史</td>
        <td>夜斗</td>
        <td>野良神</td>
    </tr>
    <tr>
        <td>立花慎之介</td>
        <td>巴卫</td>
        <td>元气少女缘结神</td>
    </tr>
    <tr>
        <td>梶裕贵</td>
        <td>艾伦</td>
        <td>进击的巨人</td>
    </tr>
    <tr>
        <td>中村悠一</td>
        <td>羽鸟芳雪</td>
        <td>世界第一初恋</td>
    </tr>
    <tr>
        <td>前野智昭</td>
        <td>雪名皇</td>
        <td>世界第一初恋</td>
    </tr>
    <tr>
        <td>冈本信彦</td>
        <td>木佐翔太</td>
        <td>世界第一初恋</td>
    </tr>
    <tr>
        <td>近藤隆</td>
        <td>小野寺律</td>
        <td>世界第一初恋</td>
    </tr>
    <tr>
        <td>小西克幸</td>
        <td>高野政宗</td>
        <td>世界第一初恋</td>
    </tr>

    </tbody>
</table>
<!--使用filterf方法-->
<a href="http://www.bilibili.com">哔哩哔哩</a>
<a href="mailto:amoryvictorialee@outlook.com">mailto Amory</a>
<a href="http://www.acfun.cn">Acfun</a>
<p class="myfav">kamiya</p>
<p class="myfav">神谷浩史</p>
<p class="myfav">樱井孝宏</p>
<p class="myfav">kaji</p>

<h2>世界第一初恋</h2>
<div class="CP">
    <p class="people">小野寺律</p>
    <p class="people">高野政宗</p>
</div>

<div class="CP">
    <p class="people">吉野千秋</p>
    <p class="people">羽鸟芳雪</p>
</div>

<div class="CP">
    <p class="people">木佐翔太</p>
    <p class="people">雪名皇</p>
</div>

<div class="CP">
    <p class="people">横泽隆史</p>
    <p class="people">桐岛禅</p>
</div>

<h2>其他的CP们</h2>
<div class="CP">
    <p class="people">白泽</p>
    <p class="people">鬼灯</p>
</div>

<div class="CP">
    <p class="people">狐妖</p>
    <p class="people">大天狗</p>
</div>

<div class="CP">
    <p class="people">折原临也</p>
    <p class="people">平和岛静雄</p>
</div>

<div class="CP">
    <p class="people">漩涡鸣人</p>
    <p class="people">宇智波佐助</p>
</div>

<div class="couples">
    <div>酒茨</div>
    <div>佐鸣</div>
    <div>狗崽</div>
    <div>忘羡</div>
    <div>All叶</div>
</div>

<script>
    //添加跳行背景颜色，很明显js的跳行计数从0开始，css的计数从1开始，所以二者想要保持样式一致，其设置其实是相反的
$(document).ready(function () {
        //使用tr:odd/even给表格跳行添加背景颜色
        $("table.first-table tr:odd").addClass("colorUp");
        $("table.first-table tr:even").addClass("colorDown");
        //使用tr:nth-child(odd/even)给表格跳行添加背景颜色
        $("table.sec-table tr:nth-child(even)").addClass("colorUp");
        $("table.sec-table tr:nth-child(odd)").addClass("colorDown");
        //给我最喜欢的前三名声优加上高亮的字体以及背景
        $("tr:contains(神谷浩史)").addClass("myLove");
        $("tr:contains(立花慎之介)").addClass("myLove");
        $("tr:contains(梶裕贵)").addClass("myLove");
    }
);

//使用filter方法
    $(document).ready(function () {
            $("a").filter(function () {
                return this.hostname;//可以排除mailto 这种连接,表明满足条件的都是外部链接
            }).addClass("external");
            $("p.myfav").filter(":contains(神谷浩史)").addClass("myLove");
            //为特定的元素添加样式
            //注意next与nextAll()的差别，以及对比pre()、preAll()的使用
            $("h2").next().addClass("myLove");
            $("div:contains(吉野千秋)").next().addClass("loveColor");
            $("div:contains(吉野千秋)").addClass("myLove");
            //如果在给自己后边的元素加上样式后还要给自己加，可以加上一个addBack()
            $("h2:contains(其他)").nextAll().addBack().addClass("myLove");
            //根据某一个子元素找到其父元素，再根据其父元素选中所有的子元素
            //所有的跟狗崽在同一层的兄弟元素都会被加上
            $("div:contains(狗崽)").parent().children().addClass("myLove");
        }
    );
</script>
</body>
</html>
